<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="yq pr">
					<image class="yq-bg pa" src="/static/image/mine/yq.png" mode=""></image>
				
					<view class="yq-bg box pa xflex-y-between xai">
						<view class="xflex-x">
							<view class="title xmr24">
								骊客金豆
							</view>
							<image class="yj" @click="zheng = !zheng" v-if="zheng" src="/static/image/mine/yjb.png" mode=""></image>
							<image class="yj" @click="zheng = !zheng" v-else src="/static/image/mine/yjz.png" mode=""></image>
						</view>
				
						<view class="xflex-x">
							<view class="money">
								{{!zheng?invite : '***'}}
							</view>
							
						</view>
					</view>
				</view>
				
			</template>

			<view class="user xbgf">
				
				
				<view class="user-box">
					<view class="titles">
						骊金豆变动明细
					</view>
					<view class="user-item xflex-x " v-for="(item,index) in dataList" :key="index">
					
						
						<view class="xflex1 xflex-y-between xai xmb24">
							<view class="xflex-x-between xmt20">
								<view class="title1">
									{{item.remark}}
								</view>
								<view class="phone" style="font-size: 36rpx;">
									{{item.type == 1 ?'+':'-'}}{{item.num}}
								</view>
							</view>
							<view class="xflex-x-between xmt20">
								<view class="phone">
									{{item.createtime}}
								</view>
								<view class="phone">
									{{item.after}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		userbean,
		userInfo
	} from '../../../network/home.js'

	const paging = ref(null)
	const dataList = ref([])
	
	let toNum = ref(0)
	let invite = ref(0)

	let current = ref(0)
	
	let zheng = ref(false)
	
	userInfo().then(res=>{
		console.log(res);
		invite.value = res.data.bean
	})
	const queryList = (pageNo, pageSize) => {
		userbean({
			page_no: pageNo,
			page_size: pageSize,
		}).then(res => {
			// invite.value = res.data.count
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss">
	.jd {
		width: 40rpx;
		height: 40rpx;
		margin-left: 11rpx;
	}
	.yj {
		width: 30rpx;
		height: 30rpx;
	}
	.yq {
		width: 690rpx;
		height: 210rpx;
		margin: auto;

		&-bg {
			width: 100%;
			height: 100%;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.box {
			z-index: 1;
			padding: 30rpx;
			box-sizing: border-box;
		}
	}

	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #F5F5F5;
	}
	.titles {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	.money {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 50rpx;
		color: #F5F5F5;
	}

	.user {
		// padding: 40rpx 30rpx;
		// box-sizing: border-box;
		margin-top: 30rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
		&-box {
			padding: 20rpx 50rpx;
		}
		&-item {
			// width: 690rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
		}

		&-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #333333;
		}
	}

	.phone {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		
	}
	.title1 {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
</style>